<template>
	<view>
		<view class="mui-content">
			<view style="width:95%;margin:0 auto;">
				<p style="height:40px;line-height: 40px;font-size:16px;">背景</p>
				<view style="height:200px;margin:10px auto;">
					<img id="bg" style="width:100%;height:100%;" :src="switchBackgroundIcon()"/>
					<view @tap="chooseImage(1)" style="position: relative;top:-55px;left:0px;background:blue;color:white;width:100%;height:50px;line-height:50px;text-align:center;opacity:0.6;">修改</view>
				</view>

				<p style="height:40px;line-height: 40px;font-size:16px;margin-top:5px;">头像</p>
				<view style="width:100%;height:80px;display:flex;align-items: flex-end;">
					<img id="icon" style="width:80px;height:100%;" :src="switchIcon()"/>
					<view @tap="chooseImage(2)" style="width:80px;height:30px;background:blue;color:white;line-height:30px;text-align:center;margin-left:10px;">
						修改
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				icon:'',			//头像图片
				backgroundIcon:'',  //背景图片
			}
		},
		onLoad() {
			this.$http.get('/gzh/getBgIcon',{
				userid:uni.getStorageSync('usersId')
			}).then(res => {
				if(res.data.code==200){
					this.icon = this.host+res.data.data.icon
					this.backgroundIcon = this.host+res.data.data.bg
				}else{
					// this.$u.toast(res.data.msg)
					// return
				}
			})
		},
		methods: {
			switchIcon(){
				if(this.icon.length>0)
					return this.icon;
				else
					return '../../static/center/yuantiao.jpg';
			},
			switchBackgroundIcon(){
				if(this.backgroundIcon.length>0)
					return this.backgroundIcon;
				else
					return '../../static/center/yuantiao.jpg';
			},
			// 选择图片
			chooseImage: async function(n) {
				// #ifdef APP-PLUS
				// TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
				if (this.sourceTypeIndex !== 2) {
					let status = await this.checkPermission();
					if (status !== 1) {
						return;
					}
				}
				// #endif
				uni.chooseImage({
					// count: this.imageList.length + this.count[this.countIndex] > 5 ? 9 - this.imageList.length : this.count[this.countIndex],
					success: (res) => {
						let url = this.host+"/upload";
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: url, 
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (res) => {
								if(n==1){
									this.backgroundIcon = this.host+"/tmp/"+JSON.parse(res.data).data
								}else{
									this.icon = this.host+"/tmp/"+JSON.parse(res.data).data
								}
								this.$http.get('/gzh/setBgIcon',{
									type:n,
									icon:JSON.parse(res.data).data,
									userid:uni.getStorageSync('usersId')
								}).then(res => {
									if(res.data.code){
										this.$u.toast("修改成功")
										return
									}
									this.$u.toast(res.data.msg)
									return
								})
								// 服务器返回的图片地址存储起来
								// this.serverImageList.push( JSON.parse(res.data).data );
							}
						});
					},
					fail: (err) => {
						console.log("err: ",err);
						// #ifdef APP-PLUS
						if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
							this.checkPermission(err.code);
						}
						// #endif
						// #ifdef MP
						if(err.errMsg.indexOf('cancel') !== '-1'){
							return;
						}
						uni.getSetting({
							success: (res) => {
								let authStatus = false;
								switch (this.sourceTypeIndex) {
									case 0:
										authStatus = res.authSetting['scope.camera'];
										break;
									case 1:
										authStatus = res.authSetting['scope.album'];
										break;
									case 2:
										authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
										break;
									default:
										break;
								}
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				})
			},
		}
	}
</script>

<style>
	img {
		width: 18%;
		height: 18%;
	}
</style>
